<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>购物车页面</title>

    <link href="/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="/basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="/css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="/css/optstyle.css" rel="stylesheet" type="text/css"/>
    <link href="/layui/css/layui.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="/js/jquery.js"></script>

</head>

<body>

<th:block th:include="header"/>

<!--购物车 -->
<div class="concent">
    <div id="cartTable">
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-chk">
                    <div id="J_SelectAll1" class="select-all J_SelectAll">

                    </div>
                </div>
                <div class="th th-item">
                    <div class="td-inner">商品信息</div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">单价</div>
                </div>
                <div class="th th-amount">
                    <div class="td-inner">数量</div>
                </div>
                <div class="th th-sum">
                    <div class="td-inner">金额</div>
                </div>
                <div class="th th-op">
                    <div class="td-inner">操作</div>
                </div>
            </div>
        </div>
        <div class="clear"></div>

        <tr class="item-list">
            <div class="bundle  bundle-last ">

                <div class="clear"></div>
                <div class="bundle-main" id="cartTable01">



                </div>
            </div>
        </tr>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <form action="/cart/confirm" method="post">
        <input type="hidden" name="ids" id="ids">
    <div class="float-bar-wrapper">
        <div id="J_SelectAll2" class="select-all J_SelectAll">
            <div class="cart-checkbox">
                <input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
                <label for="J_SelectAllCbx2"></label>
            </div>
            <span>全选</span>
        </div>
        <div class="operations">
            <a href="#" hidefocus="true" class="deleteAll">删除</a>
            <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
        </div>
        <div class="float-bar-right">
            <div class="amount-sum">
                <span class="txt">已选商品</span>
                <em id="J_SelectedItemsCount">0</em><span class="txt">件</span>
                <div class="arrow-box">
                    <span class="selected-items-arrow"></span>
                    <span class="arrow"></span>
                </div>
            </div>
            <div class="price-sum">
                <span class="txt">合计:</span>
                <strong class="price">¥<em id="J_Total">0.00</em></strong>
            </div>

            <div class="btn-area">
<!--
             <a id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算"><span>结&nbsp;算</span></a>
-->
             <!--<a  id="J_Go" class="submit-btn submit-btn-disabled"><span>结 算</span></a>-->
             <button class="submit-btn submit-btn-disabled" style="background: transparent;border: 0" ><span>结&nbsp;算</span></button>
            </div>
        </div>

    </div>
    </form>

    <div class="footer">
        <div class="footer-hd">
            <p>
                <a href="#">恒望科技</a>
                <b>|</b>
                <a href="#">商城首页</a>
                <b>|</b>
                <a href="#">支付宝</a>
                <b>|</b>
                <a href="#">物流</a>
            </p>
        </div>
        <div class="footer-bd">
            <p>
                <a href="#">关于恒望</a>
                <a href="#">合作伙伴</a>
                <a href="#">联系我们</a>
                <a href="#">网站地图</a>
                <em>© 2015-2025 Hengwang.com 版权所有</em>
            </p>
        </div>
    </div>

</div>

<!--操作页面-->

<div class="theme-popover-mask"></div>

<div class="theme-popover">
    <div class="theme-span"></div>
    <div class="theme-poptit h-title">
        <a href="javascript:;" title="关闭" class="close">×</a>
    </div>
    <div class="theme-popbod dform">
        <form class="theme-signin" name="loginform" action="" method="post">

            <div class="theme-signin-left">

                <li class="theme-options">
                    <div class="cart-title">颜色：</div>
                    <ul>
                        <li class="sku-line selected">12#川南玛瑙<i></i></li>
                        <li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
                    </ul>
                </li>
                <li class="theme-options">
                    <div class="cart-title">包装：</div>
                    <ul>
                        <li class="sku-line selected">包装：裸装<i></i></li>
                        <li class="sku-line">两支手袋装（送彩带）<i></i></li>
                    </ul>
                </li>
                <div class="theme-options">
                    <div class="cart-title number">数量</div>
                    <dd>
                        <input class="min am-btn am-btn-default" name="" type="button" value="-"/>
                        <input class="text_box" name="" type="text" value="1" style="width:30px;"/>
                        <input class="add am-btn am-btn-default" name="" type="button" value="+"/>
                        <span class="tb-hidden">库存<span class="stock">1000</span>件</span>
                    </dd>

                </div>
                <div class="clear"></div>
                <div class="btn-op">
                    <div class="btn am-btn am-btn-warning">确认</div>
                    <div class="btn close am-btn am-btn-warning">取消</div>
                </div>

            </div>
            <div class="theme-signin-right">
                <div class="img-info">
                    <img src="../images/kouhong.jpg_80x80.jpg"/>
                </div>
                <div class="text-info">
                    <span class="J_Price price-now">¥39.00</span>
                    <span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
                </div>
            </div>
        </form>
    </div>
</div>
<!--引导 -->
<div class="navCir">
    <li><a href="home2.html"><i class="am-icon-home "></i>首页</a></li>
    <li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
    <li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
    <li><a href="../person/index.html"><i class="am-icon-user"></i>我的</a></li>
</div>
<script type="text/html" id="cartTemplate">
    {{# layui.each(d,function(i,v){ }}
    <ul class="item-content clearfix" cartid="{{v.id}}">
        <li class="td td-chk">
            <div class="cart-checkbox ">
                <input class="check check01"
                       type="checkbox">

            </div>
        </li>
        <li class="td td-item">
            <div class="item-pic">
                <a href="#" target="_blank"
                   class="J_MakePoint" >
                    <img src="{{v.productImg}}"  class="itempic J_ItemImg" style="height: 80px;width: 80px"></a>
            </div>
            <div class="item-info">
                <div class="item-basic-info">
                    <a href="#" target="_blank"
                       class="item-title J_MakePoint" data-point="tbcart.8.11">{{v.productName}}</a>
                </div>
            </div>
        </li>
        <li class="td td-info">
            <div class="item-props item-props-can">

            </div>
        </li>
        <li class="td td-price">
            <div class="item-price price-promo-promo">
                <div class="price-content">
                    <!--<div class="price-line">
                        <em class="price-original">78.00</em>
                    </div>-->
                    <div class="price-line">
                        <em class="J_Price price-now" tabindex="0">{{v.price}}</em>
                    </div>
                </div>
            </div>
        </li>
        <li class="td td-amount">
            <div class="amount-wrapper ">
                <div class="item-amount ">
                    <div class="sl">
                        <input class="min am-btn" name="" type="button" value="-"/>
                        <input class="text_box" name="" type="number" value="{{v.amount}}" style="width:40px;" />
                        <!-- <input type="number" name="quant[1]" class="form-control input-number"  min="1"  value="1">-->
                        <!--<button class="add am-btn" name="" type="button" value="+">+</button>-->
                        <input class="add am-btn" name="" type="button" value="+"/>
                    </div>
                </div>
            </div>
        </li>

        <li class="td td-sum">
            <div class="td-inner">
                <em tabindex="0" class="J_ItemSum number">{{v.price*v.amount}}</em>
            </div>
        </li>
        <li class="td td-op">
            <div class="td-inner">
                <a class="delete">
                    删除</a>
            </div>
        </li>
    </ul>
    {{# }); }}
</script>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["laytpl"], function () {
        var laytpl = layui.laytpl;
        var $ = layui.jquery;

        var loadCart=function () {
            $.get("/cart/list", function (carts) {
                laytpl($("#cartTemplate").html()).render(carts,function(ht){
                    $("#cartTable01").html(ht)
                })
            })
        }
        loadCart()

        $("body").on("click",".delete",function () {
            var _this=$(this);
            var cartid=_this.closest('ul[cartid]').attr('cartid');
            console.log("aaa:"+cartid);
            layer.confirm("确认要删除吗？",function () {
                $.post("/cart/del",{cartid:cartid},function () {
                    layer.msg("删除成功",function () {
                        layer.closeAll()
                    })
                    loadCart();
                })
            })
        })

        $("body").on("click",".add", function() {
            console.log("点了加号")
            var btn = $(this);
            var cartid=btn.parent().parent().parent().closest('ul[cartid]').attr('cartid');
            var input = btn.prev();
            input.val(parseInt(input.val()) + 1);
            if (input.val() == 10) {
                btn.attr("disabled", "disabled");
            }
            if (input.val() > 10) {
               input.val(10);
            }
            btn.prev().prev().removeAttr("disabled");
            $.post("/cart/updataAmount",{cartid:cartid,amount:input.val()},function () {

                /*var price = $(this).closest('.td-price').find('.J_Price.price-now').val();
                var price01 =$(".J_Price.price-now").val();
                console.log("444:"+price)
                console.log("333:"+price01)
                console.log( $(".J_ItemSum.number").val())
                $(".J_ItemSum.number").val(price01*input.val())*/
                // 找到对应商品行的输入框、价格元素和总价元素
                console.log("111")
                var $input = btn.siblings(".text_box");
                var $price = btn.closest(".td-amount").prev().find(".J_Price.price-now");
                var $sum = btn.closest(".td-amount").next().find(".J_ItemSum.number");
                // 获取当前输入框内的数量值和商品单价
                var num = parseInt($input.val());
                var price = parseFloat($price.text());
                    // 计算当前的总价并更新到总价元素中
                    var sum = price * num;
                    $sum.text(sum);
                count();
            })

        })

        //给减号添加事件
        $("body").on("click",".min", function() {
            var btn = $(this);
            var input = btn.next();
            input.val(parseInt(input.val()) - 1);
            if (input.val() == 1) {
                btn.attr("disabled", "diabled");
            }
            if(input.val()<1){
                input.val(1)
            }
            btn.next().next().removeAttr("disabled");
            var cartid=btn.parent().parent().parent().closest('ul[cartid]').attr('cartid');
            $.post("/cart/updataAmount",{cartid:cartid,amount:input.val()},function () {
                var $input = btn.siblings(".text_box");
                var $price = btn.closest(".td-amount").prev().find(".J_Price.price-now");
                var $sum = btn.closest(".td-amount").next().find(".J_ItemSum.number");
                // 获取当前输入框内的数量值和商品单价
                var num = parseInt($input.val());
                var price = parseFloat($price.text());
                // 计算当前的总价并更新到总价元素中
                var sum = price * num;
                $sum.text(sum);
                count();
            })

        })

        //总共多少钱
        var count = function() {
            var sum = 0.0;
            var ids="";
            $.each($(".check01:checked"), function(i, v) {
                var price = parseFloat($(v).closest(".td-chk").siblings(".td-sum")
                    .find(".J_ItemSum.number").text());
                if(!isNaN(price)){
                    sum += price;
                }
                if (ids!=""){
                    ids+=","
                }
                ids+=$(v).closest('ul[cartid]').attr('cartid');
            })
            $("#ids").val(ids)
            $("#J_Total").html(sum.toFixed(2));
        }


        //全选
        $("body").on("click", ".check-all", function() {
            var status = this.checked;
            $(".check01").prop("checked", status); // 将所有 checkbox 设置为同样的状态
            $("#J_SelectedItemsCount").html($(".check01:checked").length); // 显示选中的 checkbox 数量
            count();
        })

        //给复选框
        $("body").on("click", ".check", function() {
            count();
            var isAllChecked = ($(".check01").length) === $(".check01:checked").length;
            $(".check-all").prop("checked", isAllChecked); // 根据子节点状态更新 "全选" checkbox 的勾选状态
            $("#J_SelectedItemsCount").text($(".check01:checked").length); // 显示选中的商品数量

        })

        $.get("/selectByUsername",function (m) {
            if (m.data !=null){
                // 创建并设置带有圆角、自适应填充的用户头像
                var imgElement = $("<img>")
                    .attr("src", m.data.avatar)
                    .attr("style", "width:50px;height:50px;border-radius:50%;");
                // 把新的图片元素插入到"user"元素之前
                imgElement.insertBefore($("#user"));

                // 更新用户姓名
                $("#user").text("             "+m.data.username);
				$("#user").attr("href","/information/");
                // 删除原来的"register"元素
                $("#register").remove();
            }
        });

    })
</script>
</body>

</html>